<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Swiper练习</title>
    <link rel="stylesheet" href="lib/swiper/css/swiper.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            height: 100%;
        }

        .item-comment {
            padding: 10px;
        }

        .item-comment + .item-comment {
            border-top: 1px solid #cccccc;
        }

        .header-img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            vertical-align: middle;
        }

        .comment-header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .comment-header > div:nth-child(1) > span {
            margin-left: 5px;
        }

        .item-comment > .comment-header > .comment-score > span {
            color: #f40;
        }

        .item-comment > .comment-body {
            padding: 0 0 0 35px;
        }

        .item-comment > .comment-body > p {
            padding: 10px 0;
        }

        .item-comment > .comment-body > .comment-imgs {
            display: flex;
            flex-wrap: wrap;
        }

        .item-comment > .comment-body > .comment-imgs > img {
            width: 32%;
            margin-bottom: 5px;
            margin-left: 5px;
        }

        .item-comment > .comment-body > .comment-imgs > img:nth-child(3n+1) {
            margin-left: 0px;
        }

        #mask {
            position: fixed;
            top: 0;
            left: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
            background-color: rgba(51, 51, 51, 0.8);
            display: none;
        }

        #mask > .swiper-wrapper > .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #mask > .swiper-wrapper > .swiper-slide > img {
            vertical-align: middle;
        }
    </style>
</head>
<body>

<div class="item-comment">
    <div class="comment-header">
        <div>
            <!--用户头像-->
            <img src="http://img3.imgtn.bdimg.com/it/u=2059451939,1640099914&fm=26&gp=0.jpg" alt="" class="header-img">
            <span>This is user name 1</span>
        </div>
        <div class="comment-score">
            <!--用户评价的星星-->
            <span>★</span>
            <span>★</span>
            <span>★</span>
            <span>☆</span>
            <span>☆</span>
        </div>
    </div>

    <div class="comment-body">
        <p>六一满减一四八八，用了三十卷和白条五百减一百卷，实际一三五八入手。出厂为今年的三月，色彩很好，没坏点，色彩也很好。至于大多数人说屏幕黄的问题，把色温调成7500k就好。
            四角偏暗只有手机拍照的时候看得出来，其余的时候没发觉会这样。也没太感觉到很多人说的延迟问题，我用的1060红龙，理论上不会卡的，所以不会是卡得发觉不了。边框的确挺窄的，就是看中这点加钱才选的这款显示器。不是专业人士的眼，看不出这款的缺点。但是我却看到和别的显示器对比：边框窄，色彩好，售后好！这三点就够了，总体来说很好，不错！京东的六一八活动很给力，优惠很大，以后买东西首选京东！</p>
        <!--评价的图片-->
        <div class="comment-imgs">
            <img src="http://pic.qiantucdn.com/58pic/13/75/82/36c58PICPZI_1024.jpg"
                 alt="">

            <img src="http://pic.58pic.com/58pic/16/00/52/11J58PICD3S_1024.jpg"
                 alt="">

            <img src="http://tupian.enterdesk.com/2014/xll/01/26/4/fengguang1.jpg"
                 alt="">


            <img src="http://pic.58pic.com/58pic/17/14/25/56N58PICCmT_1024.jpg"
                 alt="">

            <img src="http://scimg.jb51.net/allimg/150819/14-150QZ9194K27.jpg"
                 alt="">
        </div>
    </div>
</div>


<div class="item-comment">
    <div class="comment-header">
        <div>
            <!--用户头像-->
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1499081146388&di=9f02c9e3d9bfb1b3aaf8b6ff746634f6&imgtype=0&src=http%3A%2F%2Fm.qqzhi.com%2Fupload%2Fimg_3_1824592419D975774894_23.jpg"
                 alt="" class="header-img">
            <span>This is user name 2</span>
        </div>
        <div class="comment-score">
            <!--用户评价的星星-->
            <span>★</span>
            <span>★</span>
            <span>★</span>
            <span>★</span>
            <span>☆</span>
        </div>
    </div>

    <div class="comment-body">
        <p>
            用了很多天发现没问题才做的评价：次日达配送很快，包装很严密，有发票，里面的手机盒有塑料膜封住贴有京东字样，手机盒背面的信息很详细，手机背面有进网许可，登录苹果官网查询IMEI码，显示未激活，提前在官网用邮箱注册了Apple
            ID，用信封的针打开并插入手机卡，打开手机按步骤操作登录Apple
            ID后，再登录官网查询显示保修期为1年，手机盒背后和拨打*#06#以及保修卡的IMEI三码合一，手机-设置-通用-本机信息查询出厂信息，是国产行货，下载鲁大师和安兔兔评测是真机，耳机立体声很棒，比普通耳机音效要好很多，打电话时要把原来的塑料膜撕下，否则声音会小，打完再把膜贴上去，影音效果和外放都很棒，拍照效果很好，玩小游戏不卡，上网很流畅，微信聊天视频语音通话也很好，一开始数据线和充电器不匹配，咨询了用苹果手机的朋友，多插几次就好了，现在数据线连接充电器可以正常充电了，充电三小时用一天，看视频可能用的电快一点，指纹解锁和Siri助理很有意思，总之用这部手机的体验很棒，我也成了果粉，已买手机壳，准备去手机贴膜了</p>
        <!--评价的图片-->
        <div class="comment-imgs">
            <img src="http://img2.imgtn.bdimg.com/it/u=2420970945,2518948620&fm=214&gp=0.jpg"
                 alt="">

            <img src="http://pic.58pic.com/58pic/13/60/02/31Y58PICJiR_1024.jpg"
                 alt="">

            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1499081065407&di=907a3e077cbde4110aa509508c00cae4&imgtype=0&src=http%3A%2F%2Fphotos.tuchong.com%2F331716%2Ff%2F4645640.jpg"
                 alt="">


            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1499081065405&di=13f9aa7f4f721d6c81a15c6cec0d9f77&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201409%2F30%2F20140930233607_mXYik.jpeg"
                 alt="">

            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1499081065404&di=cae65a2762aa9cffc74e4cf137c8daed&imgtype=0&src=http%3A%2F%2Fcdnq.duitang.com%2Fuploads%2Fitem%2F201506%2F12%2F20150612191656_jJHxP.jpeg"
                 alt="">
        </div>
    </div>
</div>


<div class="swiper-container" id="mask">
    <div class="swiper-wrapper">
        <!--<div class="swiper-slide"><img src="" alt=""></div>-->
        <!--<div class="swiper-slide"><img src="" alt=""></div>-->
        <!--<div class="swiper-slide"><img src="" alt=""></div>-->
    </div>
</div>


<script src="lib/jquery.js"></script>
<script src="lib/swiper/js/swiper.jquery.js"></script>
<script>
    $(function () {
        //初始化评论图片的高度
        $('.item-comment > .comment-body > .comment-imgs > img').height($('.item-comment > .comment-body > .comment-imgs > img').width());

        $('.item-comment > .comment-body > .comment-imgs > img').on('click', function () {
            var images = [];
            $(this).parent().children().each(function (index, ele) {
                images.push($(ele).attr('src'));
            });
            previewImgs($(this).index(), images);
        });
        var swiper = null;

        function previewImgs(index, imgs) {
            swiper = null;
            var content = '';
            $.each(imgs, function (i, value) {
                content += '<div class="swiper-slide"><img src="' + value + '" alt="" style="width: 100%;height: auto"></div>';
            })
            $('#mask>.swiper-wrapper').html(content).parent().show();
            swiper = new Swiper('#mask', {
                initialSlide: index
            });
            $("body").on("touchmove",function(event){
                event.preventDefault();
            }, false)
        }


        $('#mask').on('click', function () {
            $(this).hide();
            if (swiper) {
                swiper.slideTo(0, 0);
            }
            $("body").off("touchmove");
        });
    });
</script>
</body>
</html>